Magento vertical menu

Magento comes with a template there the customers select the right category from a horizontal menu vertical category menu is a must when you have very many categories, subcategories and items and that you want to show your possible customers which main/sub categories exists by default without that they need to pulldown a horisontal menu.
if u want to display categories vertical in magento.use that code in any
page(2columns-left.phtml,2columns-right.phtml,3columns.phtml).

<div class=”menu”>
<div class=”menu-left”>
<ul>

<?php
$obj = new Mage_Catalog_Block_Navigation();
$store_cats    = $obj->getStoreCategories();

if(empty($store_cats))
return false;
else
{

foreach ($store_cats as $_category)
echo $obj->drawItem($_category);

}
?>
</ul><!– end ul –>
</div><!– end menu-left  –>

</div><!– menu –>

Don,t use default ul and li style from boxes.css .Make your own style for ul and li and add that code at the end of boxes.css.

e.g.
.menu
{
float:left;
width:15%;
height:auto;

}

.menu-left{
background-color:#FFFFFF;
float:left;
height:auto;
width:100%;
}
.menu-left ul{
margin-left:0px;
margin-top:-2pxpx;
background-color:#FFFFFF;
float:left;
height:auto;
width:100%;
padding-left:0;
margin-left:0px;
}
.menu-left ul li{
background-position:4px 3px;
float:left;
line-height:18px;
list-style-type:none;
margin-left:0;
padding-left:0;
text-align:left;
text-decoration:none;
width:100%;
}
.menu-left ul li a{
color:#67831C;
text-decoration:none;
padding:5px 12px 0 8px;
}
.menu-left ul li span
{
margin-left:15px;
}

.menu-left ul li ul li
{
background-position:1px 59%;
background-repeat:no-repeat;
float:left;
margin-left:20px;
line-height:18px;
list-style-type:none;
width:86%;

text-align:left;
text-decoration:none;
}

.menu-left ul li ul li a{
color:#67831C;
}
.menu-left ul li ul li a span{

margin-left:15px;
}

feel free to post your comments

~ by ahsanaimer on May 12, 2009.

Leave a comment